/** * ITHUI® * ITHUI-Withdraw适用于余额管理、提现页面，兼容小程序、APP、H5，兼容H5、小程序、APP。 * Copyright (c) 2023 ITHANG All rights reserved. * Licensed (
http://www.apache.org/licenses/LICENSE-2.0 ) * 复制使用请保留本段注释，感谢支持开源！ * * 作者主页 * https://ithang.cn/ * * 开源地址: * https://github.com/ithang-cn/ITHUI-Withdraw *
https://gitee.com/ithang-cn/ITHUI-Withdraw * */

<template>
  <view class="ithui-content">
    <view class="ithui-view">
      <view class="view-info">
        <view class="userinfo">
          <view class="flex">
            <image v-if="userData && userData.avatar" class="userinfo-headimg" :src="userData.avatar.includes('https') ? userData.avatar : IMG_URL + userData.avatar"></image>
            <image v-else class="userinfo-headimg" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/20/f_20250320164147A002.png" mode=""></image>
            <view class="flex-one">
              <view class="flex-one-text" style="color: black">{{ userData.nickname }}({{ uuid }})</view>
              <view class="flex-one-text" style="color: black">手机号：{{ userData.phone }}</view>
            </view>
            <view class="arrow arrow-one" style="color: black" @click="showModal = true"><span>名词解释</span></view>
          </view>
        </view>
        <u-modal :show="showModal" title="名词解释" confirmText="我已知晓" @confirm="showModal = false" confirmColor="#ff1e0f">
          <view class="slot-content">
            <rich-text :nodes="content"></rich-text>
          </view>
        </u-modal>
        <view class="box">
          <view class="tx">
            <view class="tx-grid">
              <view class="tx-grid-text">
                <view class="title">可提现余额</view>
                <view class="money">
                  <text>{{ userData.integral }}</text>
                  <text class="money-b">元</text>
                </view>
              </view>
            </view>
            <view class="tx-grid" @click="navTo('/pages_h5/myCenter/components/user_money_add?type=integral')"><span class="tx-grid-comm-sign">立即提现</span></view>
          </view>
          <view class="palace palace-one">
            <!-- <view class="palace-grid">
              <view class="palace-grid-text">
                <view class="palace-grid-text-data">
                  <text>{{ userData.coming }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">即将到账</view>
              </view>
            </view> -->
            <view class="palace-grid">
              <view class="palace-grid-text" @click="changeTab(0)">
                <view class="palace-grid-text-data">
                  <text>{{ ((parseFloat(userData.integral || 0) * 100 + parseFloat(userSum.data / 100 || 0) * 100) / 100).toFixed(2) }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">累计返利</view>
              </view>
            </view>
            <view class="palace-grid">
              <view class="palace-grid-text" @click="changeTab(1)">
                <view class="palace-grid-text-data">
                  <text>{{ userSum.data / 100 || 0 }}</text>
                  <text class="palace-grid-text-data-b">元</text>
                </view>
                <view class="palace-grid-text-name">累计提现</view>
              </view>
            </view>
          </view>
        </view>
        <view class="top" style="padding: 0 30rpx">
          <u-subsection :height="'80px'" :list="tabs" fontSize="32" activeColor="#ff8440" :current="tabIndex" mode="subsection" @change="changeTab"></u-subsection>
          <u-empty
            v-if="(integralList.length == 0 && tabIndex != 1) || (tabIndex == 1 && tixianList.length == 0)"
            style="margin-top: 40rpx"
            mode="order"
            text="没有记录"
            iconSize="140"
            textSize="32"
          >
          </u-empty>
        </view>
        <view class="list-view" v-if="tabIndex == 1">
          <view class="list-item" v-for="(item, index) in tixianList" :key="index" hover-class="hover" :hover-stay-time="150" bindtap="detail">
            <view class="content-box">
              <view class="des-box">
                <!-- <view class="tit">
                  {{ item.title }}
                </view> -->
                <view class="source" :style="{ color: item.status == 'SUCCESS' ? '#4caf50' : '#ff1e0f' }">
                  {{ item.status == "WAIT_USER_CONFIRM" ? "待您确认提现，请点击重新提现按钮" : item.status == "SUCCESS" ? "提现成功！" : "提现失败了，请重新发起" }}
                </view>
                <view class="time">{{ item.updateTime }}</view>
              </view>
            </view>
            <view class="money" :class="{ less: is_withdraw }">
              {{ is_withdraw ? "-" : "+" }}{{ (item.transferAmount / 100).toFixed(2) }}
              <u-button
                :disabled="numb == 1 ? false : true"
                @click="withdrawAgain(item.packageInfo)"
                shape="circle"
                size="small"
                plain="true"
                v-if="item.status == 'WAIT_USER_CONFIRM'"
                type="primary"
                text="重新提现"
              ></u-button>
            </view>
          </view>
        </view>
        <view class="list-view" v-else>
          <view class="list-item" v-for="(item, index) in integralList" :key="index" hover-class="hover" :hover-stay-time="150" bindtap="detail">
            <view class="content-box">
              <view class="des-box">
                <view style="color: black" class="tit">
                  {{ item.title }}
                </view>
                <view class="time">{{ item.updateTime }}</view>
              </view>
            </view>
            <view class="money" :class="{ less: item.type == 2 }"> {{ item.type == 2 ? "-" : "+" }}{{ tabIndex == 1 ? item.real_money : item.integral }} </view>
          </view>
        </view>
        <view class="tip">仅显示近一年内的收支记录</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfo, transferToUserList, transferToUserSum } from "../../../utils/request_api";
import { getIntegralList } from "../../../utils/api/local";
import { IMG_URL } from "../../../config/index.js";
import uButton from "../../../uni_modules/uview-ui/components/u-button/u-button.vue";
export default {
  components: { uButton },
  data() {
    return {
      IMG_URL,
      uuid: "",
      is_withdraw: false,
      list: [],
      userData: {},
      showModal: false,
      date: "incomeMonth",
      content: `<p><em style="font-style:normal;color:#ff1e0f">可提现余额：</em>当前可以提现的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">累计到账：</em>累计交易成功的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">累计提现：</em>累计提现成功的金额</p>
				          <p><em style="font-style:normal;color:#ff1e0f">*注：所有金额币种均为人民币，单位为元，符号￥</em></p>
				         `,
      tabs: ["返利记录", "提现记录"],
      tabIndex: 0,
      loadend: false,
      /* 消费积分增加记录 */
      page1: 1,
      limit1: 10,
      totaladd: 0,
      integralList: [],
      /* 提现记录 */
      // page2: 1,
      // limit2: 10,
      // totalre: 0,
      tixianList: [],
      userSum: "" /* 累计提现 */,
      numb: 1,
    };
  },
  onShow() {
    this.initData();
  },
  onLoad(options) {
    if (options.type == "1") {
      this.tabIndex = 1;
      this.changeTab(this.tabIndex);
    }
    uni.showLoading({
      title: "加载中",
    });
    this.initData();
    this.uuid = uni.getStorageSync("uid");

    this.getIntegralListss();
    setTimeout(() => {
      uni.hideLoading();
    }, 500);
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "加载中",
    });
    this.integralList = [];
    this.page1 = 1;
    this.limit1 = 10;
    //调用获取数据方法
    this.getIntegralListss();
    this.tixianList = [];
    this.transferToUserLists();
    this.showModal = false;
    this.initData();
    setTimeout(function () {
      uni.hideLoading();
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    let allTotal = this.page1 * this.limit1;
    console.log("onReachBottom@@@@@@@@@@@@@@@@@@@@@");

    if (allTotal < this.totaladd) {
      //当前条数小于总条数 则增加请求页数
      this.page1++;
      if (this.tabIndex == 0) {
        this.getIntegralListss();
      } else {
        this.transferToUserLists();
      }
    } else {
      // console.log('已加载全部数据')
    }
  },

  methods: {
    /* 消费积分记录 */
    getIntegralListss() {
      let that = this;
      getIntegralList({
        page: that.page1,
        limit: that.limit1,
        type: 1,
      }).then((res) => {
        this.totaladd = res.data.total;
        const newlist = res.data.list;
        this.integralList.push(...newlist);
      });
    },
    /* 提现记录 */
    transferToUserLists() {
      transferToUserList({
        uid: uni.getStorageSync("uid"),
        pageNum: this.page1,
        pageSize: this.limit1,
        type: 3,
      }).then((res) => {
        this.totaladd = res.total;
        const newlist = res.rows;
        this.tixianList.push(...newlist);
      });
    },

    async initData() {
      /* 累计提现 */
      this.userSum = await transferToUserSum({
        uid: uni.getStorageSync("uid"),
        status: "SUCCESS",
        type: 3,
      });
      var userData = await getUserInfo();
      this.userData = userData.data;
    },

    changeTab(index) {
      this.tabIndex = index;
      this.page1 = 1;
      this.limit1 = 10;
      this.integralList = [];
      this.tixianList = [];
      if (this.tabIndex == 0) {
        this.getIntegralListss();
        this.is_withdraw = false;
      } else if (this.tabIndex == 1) {
        this.transferToUserLists();
        this.is_withdraw = true;
      }
      uni.showLoading({
        title: "加载中",
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 500);
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    withdrawAgain(packageInfo) {
      if (this.numb == 1) {
        this.numb = 2;
        uni.showLoading({
          title: "加载中",
        });
        if (wx.canIUse("requestMerchantTransfer")) {
          wx.hideLoading();
          wx.requestMerchantTransfer({
            mchId: "1700455211",
            appId: "wxffaff0eaf02b3027",
            package: packageInfo,
            success: (res) => {
              this.numb = 1;
              this.onPullDownRefresh();
              uni.showToast({ title: "提现成功！", icon: "none" });
            },
            fail: (res) => {
              this.numb = 1;
              uni.showToast({ title: "取消操作", icon: "none" });
            },
          });
        } else {
          this.numb = 1;
          uni.hideLoading();
          wx.showModal({
            content: "你的微信版本过低，请更新至最新版本。",
            showCancel: false,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "请勿重复操作！",
        });
      }
    },
    /* 重新提现 */
    /*   withdrawAgain(t) {
      uni.navigateTo({
        url: "/pages_h5/myCenter/components/user_money_add?iteminfo=" + encodeURIComponent(JSON.stringify(t)) + "&type=integral",
      });
    }, */
  },
};
</script>

<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
::v-deep .u-modal__content {
  justify-content: flex-start;
}

.flex {
  display: flex;
  align-items: center;
  padding: 50rpx;
  position: relative;

  &-one {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #fff;

    &-text {
      margin: 10rpx 0;
      color: #f5f5f5;
      font-weight: normal;
    }
  }
}

.ithui {
  &-content {
    .h5title {
      width: 100%;
      height: 120rpx;
      text-align: center;
      line-height: 200rpx;
      color: black;
      font-size: 34rpx;
      font-weight: bold;
      background: linear-gradient(to right, #ff8440, #ff1e0f);
    }

    .list-view {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .list-item {
      width: 100%;
      padding: 30rpx 28rpx;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1rpx solid #eaeef1;
    }

    .item-last::after {
      left: 0 !important;
    }

    .content-box {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .des-box {
      min-height: 80rpx;
      padding-left: 28rpx;
      box-sizing: border-box;
      vertical-align: top;
      color: #fff;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .tit {
      font-size: 32rpx;
      max-width: 420rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .source {
      margin: 12rpx 0;
    }

    .time {
      color: #888;
    }

    .money {
      font-size: 38rpx;
      font-weight: 500;
      color: #ff1e0f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 20rpx;
    }

    .less {
      color: #4caf50 !important;
    }

    .tip {
      margin-top: 50rpx;
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: 24rpx;
      color: #888;
    }
  }

  &-view {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .view-info {
      width: 100%;
      height: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      padding-bottom: 116rpx;

      .userinfo {
        // background: linear-gradient(to right, #ff8440, #ff1e0f);
        // background-color: #ff8440;
        background-color: #ffeadf;
        padding-bottom: 100rpx;

        .userinfo-headimg {
          width: 130rpx;
          height: 130rpx;
          border-radius: 100%;
          overflow: hidden;
          margin-right: 20rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
        }

        .arrow {
          position: relative;
          padding-right: 30rpx;

          span {
            font-size: 28rpx;
            color: black;
          }

          &:after {
            content: " ";
            display: inline-block;
            height: 12rpx;
            width: 12rpx;
            border-width: 4rpx 4rpx 0 0;
            border-color: #848484;
            border-style: solid;
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            position: relative;
            top: -4rpx;
            position: absolute;
            top: 50%;
            margin-top: -8rpx;
            right: 4rpx;
            border-radius: 2rpx;
          }
        }

        .arrow-one:after {
          border-color: black;
          margin-top: -6rpx;
        }
      }

      .box {
        width: 94%;
        // background: white;
        background-image: url(https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/08/小程序后台_20250508150126A002.png);
        border-radius: 10rpx;
        margin: -120rpx auto 20rpx;
        box-shadow: 0 6rpx 20rpx #e7e7e7;
        background-size: 100% 100%;

        .tx {
          padding-top: 26rpx;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          align-content: center;

          &-grid {
            box-sizing: border-box;

            &:first-child {
              margin-left: 40rpx;
            }

            &-comm-sign {
              display: block;
              border-radius: 40rpx 0 0 40rpx;
              font-size: 26rpx;
              padding: 16rpx 44rpx;
              background: linear-gradient(to right, #fef082, #ffc551);
              background-color: #fef082;
              color: #cf4400;
            }

            &-text {
              display: block;
              color: #fff;
              font-size: 26rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              .title {
                font-size: 32rpx;
                font-weight: normal;
                color: #fff;
              }

              .money {
                font-size: 60rpx;
                color: #fff;
                letter-spacing: 2rpx;
                margin-bottom: 10rpx;

                &-b {
                  font-size: 28rpx;
                }
              }
            }
          }
        }

        .palace {
          padding-bottom: 20rpx;
          overflow: hidden;
          display: flex;
          justify-content: center;

          &-grid {
            flex: 1;
            position: relative;
            box-sizing: border-box;

            &:not(:last-child) {
              &:after {
                width: 1rpx;
                height: 80rpx;
                background: #fddece;
                content: " ";
                display: inline-block;
                position: absolute;
                top: 0;
                right: 0;
              }
            }

            &-text {
              display: block;
              text-align: center;
              color: #fff;
              font-size: 32rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              &-name {
                font-size: 26rpx;
                font-weight: normal;
                color: #fff;
              }

              &-data {
                font-size: 32rpx;
                color: #fff;
                letter-spacing: 2rpx;
                margin-bottom: 5rpx;

                &-b {
                  font-size: 20rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
